<template>
	<view class="container">
		<!-- 圆形小logo -->
		<view class="logo-container">
		  <image class="logo" src="https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/20250723-184216.jpeg" mode="aspectFit"></image>
		</view>
	  <view class="sub_title">欢迎注册小虎点点</view>
		
		<!-- 注册表单 -->
		<view class="form-container">
			<!-- 姓名输入 -->
			<view class="form-item">
				<text class="form-label">姓名</text>
				<input class="form-input" v-model="formData.nickName" placeholder="请输入您的姓名" />
			</view>
			
			<!-- 手机号输入 -->
			<view class="form-item">
				<text class="form-label">手机号</text>
				<input class="form-input" v-model="formData.phone" placeholder="请输入手机号" type="number" maxlength="11" />
			</view>
			
			<!-- 出生年月选择 -->
			<view class="form-item">
				<text class="form-label">出生年月</text>
				<picker class="form-select" style=" flex: 1;" v-model="formData.birthDate" mode='date'
					:start="minDate" :end="maxDate" @change="setBirthDay">
					<view :style="!formData.birthDate?'color:#8a8383;':''">
						{{formData.birthDate?formData.birthDate:'出生年月'}}
					</view>
				</picker>
			</view>
			
			<!-- 性别选择器已注释 -->
			<!-- 
			<view class="form-item">
				<text class="form-label">性别</text>
				<picker class="form-select" mode='selector' :range="genderList" @change="changeGender($event)">
					<view :style="!formData.gender?'color:#8a8383;':''">
						{{formData.gender?formData.gender:'请选择性别'}}
					</view>
				</picker>
			</view> 
			-->
			
			<!-- 注册按钮 -->
			<button class="register-btn" @click="submitRegister">注册</button>
			
			<!-- 返回登录 -->
			<view class="login-link" @click="goToLogin">
				已有账号？立即<text class="link">登录</text>
			</view>
		</view>
	</view>
</template>

<script>
  export default {
    data() {
      // 计算最小和最大出生日期范围
      const now = new Date();
      const maxDate = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
      const minDate = `${now.getFullYear() - 100}-01-01`;
      
      return {
        formData: {
          nickName: '',
          phone: '',
          birthDate: '',
          // gender: ''  // 性别字段已注释
        },
        // genderList: ['男', '女']  // 性别列表已注释
        minDate,
        maxDate
      }
    },
    onShow() {
      this.$tools.setStorageOpenid();
    },
    methods: {
      // // 改变性别选择
      // changeGender(e) {
      //   this.formData.gender = this.genderList[e.detail.value];
      // },
      
      // 设置出生日期
      setBirthDay(e) {
        const value = e.detail.value.split('-');
        this.formData.birthDate = `${value[0]}-${value[1].padStart(2, '0')}-${value[2].padStart(2, '0')}`;
      },
      
      // 表单验证
      validateForm() {
        // 验证姓名
        if (!this.formData.nickName.trim()) {
          uni.showToast({
            title: '请输入姓名',
            icon: 'none'
          });
          return false;
        }
        
        // 验证手机号
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(this.formData.phone)) {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none'
          });
          return false;
        }
        
        // 验证出生日期
        if (!this.formData.birthDate) {
          uni.showToast({
            title: '请选择出生年月',
            icon: 'none'
          });
          return false;
        }
        
        // // 验证性别
        // if (!this.formData.gender) {
        //   uni.showToast({
        //     title: '请选择性别',
        //     icon: 'none'
        //   });
        //   return false;
        // }
        
        return true;
      },
      
      // 提交注册
      submitRegister() {
        if (!this.validateForm()) {
          return;
        }
        
        const that = this;
        const openid = uni.getStorageSync('openid') || '';
        
        // 添加openid到表单数据
        const submitData = {
          ...this.formData,
          openid: openid
        };
		
		this.$http.POST('/app/user/login/registerByPhone', {
		  // code: e.detail.code, 
		  openid: openid,
		  nickName: that.formData.nickName,
		  birthday: that.formData.birthDate
		}, function (res) {
		  console.log('成功获取手机号信息', res);
		  uni.setStorageSync('token', res.data.token);
		  uni.setStorageSync('refreshToken', res.data.refreshToken);
		  uni.removeStorageSync('islogout');
		  // 获取页面栈
		  const pages = getCurrentPages();
		  if (pages.length > 1) {
		    // 有上一级页面，返回上一级
		    console.log('有上一级页面，返回上一级');
		    uni.navigateBack();
		  } else {
		    // 没有上一级页面，返回首页
		    console.log('没有上一级页面，返回首页');
		    that.$tools.routerTo('/pages/index/index', 'switchTab', 'none');
		  }
		});
        
        // 调用注册接口
        // this.$http.POST('/app/user/info/add', submitData, function (res) {
        //   console.log('注册结果', res);
        //   if (res.message === 'success') {
        //     // 注册成功，保存token
        //     uni.setStorageSync('token', res.data.token);
        //     uni.setStorageSync('refreshToken', res.data.refreshToken);
        //     uni.removeStorageSync('islogout');
            
        //     uni.showToast({
        //       title: '注册成功',
        //       icon: 'success'
        //     });
            
        //     // 延迟跳转
        //     setTimeout(() => {
        //       // 获取页面栈
        //       const pages = getCurrentPages();
        //       if (pages.length > 1) {
        //         // 有上一级页面，返回上一级
        //         uni.navigateBack();
        //       } else {
        //         // 没有上一级页面，返回首页
        //         that.$tools.routerTo('/pages/index/index2', 'switchTab', 'none');
        //       }
        //     }, 1500);
        //   } else {
        //     uni.showToast({
        //       title: res.msg || '注册失败',
        //       icon: 'none'
        //     });
        //   }
        // }, function (error) {
        //   console.error('注册请求失败', error);
        //   uni.showToast({
        //     title: '网络异常，请重试',
        //     icon: 'none'
        //   });
        // });
      },
      
      // 前往登录页
      goToLogin() {
        this.$tools.routerTo('/pages/index/login', 'navigateTo', 'none');
      }
    }
  }
</script>

<style>
page {
  background-color: #f5f5f5;
}

.sub_title {
  font-size: 18px;
  text-align: center;
  margin-bottom: 50px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  padding: 20px;
  padding-top: 15vh;
}

.logo-container {
  margin-bottom: 20px;
}

.logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.form-container {
  width: 100%;
  max-width: 600rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
}

.form-select {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.register-btn {
  width: 100%;
  margin-top: 30rpx;
  margin-bottom: 20rpx;
  background-color: #00BAAD;
  color: white;
  border-radius: 50px;
  font-size: 18px;
  height: 90rpx;
  line-height: 90rpx;
}

.login-link {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}

.link {
  color: #00BAAD;
}
</style>